<template>
  <div class="panel">
    <div class="panel-body"
         v-loading="load_data"
         element-loading-text="拼命加载中">
      <el-form label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="告警信息:">
              {{task.Source}}
            </el-form-item>
            <el-form-item label="自愈项目:">
              {{task.Item}}
            </el-form-item>
            <el-form-item label="自愈时间:">
              {{task.Duration}}
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="任务状态:">
              <span v-if="task.Status == 0">未完成</span>
              <span v-else>已完成</span>
            </el-form-item>
            <el-form-item label="自愈结果:">
              {{task.Result}}
            </el-form-item>
            <el-form-item label="产生时间:">
              {{task.CeateTime}}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div>
        <el-row >
          <el-col :span="24">
            <el-steps :active="active"  >
              <el-step :title="'步骤'+String(index+1)" :description="'主机'+record.host+'执行'+record.command" v-for="(record,index) in records" :key="index"></el-step>
            </el-steps>
          </el-col>
        </el-row>
        <div  style="margin: 5px 5px 0px;
                      padding: 3px;
                      border: 1px dashed rgb(0, 160, 198);
                      background-color: rgb(0,0,0);">
          <code style="background-color: rgb(0, 0, 0);color:#00ff00">
            <br>
            <span v-for="n in showText" :style="{'color': n.color}"> <pre  style="background-color: rgb(0, 0, 0);padding: 0px;font-size:16px;border: 0px;margin:0px " :style="{'color': n.color}" v-html="n.text"></pre> <br></span>
            <br>
          </code>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import { getTask } from '@/api/recoverTask'
  export default {
    name: 'taskssDetail',
    data() {
      return {
        load_data: false,
        task: [],
        task_id: this.$route.params.id,
        stepLength: null,
        records: [],
        showText: [],
        active: 0
      }
    },
    created() {
      this.load_data = true
      this.getList()
    },
    beforeDestroy() {
      clearTimeout(this.timeout1)
    },
    methods: {
      getList() {
        var _this = this
        getTask(this.task_id).then(response => {
          this.task = response.data.task
          console.log(response.data)
          this.stepLength = response.data.record.length
          this.records = response.data.record
          this.load_data = false
          this.active = 0
          this.showText = []
          for (var i = 0; i < this.records.length; i++) {
            var color = '#00ff00'
            if (this.records[i].status === '0') {
              color = 'red'
            } else if (this.records[i].status) {
              this.active = this.active + 1
            }
            try {
              var text = JSON.parse(this.records[i].result)
            } catch (e) {
              console.log(e)
              continue
            }
            if (typeof text === 'string') {
              this.showText.push({ text: this.records[i].result, 'color': color })
            } else if (Object.prototype.toString.call(text) === '[object Array]') {
              for (var j = 0; j < text.length; j++) {
                try {
                  this.showText.push({ text: 'IP:' + text[j].Host + '    执行命令:' + this.records[i].command, 'color': color })
                  if (text[j].Error) {
                    this.showText.push({ text: '错误结果:\n' + text[j].Result, 'color': color })
                  } else {
                    this.showText.push({ text: '执行结果:\n' + text[j].Result, 'color': color })
                  }
                  if (text[j].Error) {
                    this.showText.push({ text: '错误:' + text[j].Error, 'color': color })
                  }
                  this.showText.push({ text: '=============', 'color': color })
                } catch (e) {
                  console.log(e)
                }
              }
            } else {
              this.showText.push({ text: '执行结果:\n' + text.Result, 'color': color })
              if (text.Error) {
                this.showText.push({ text: '错误:' + text.Error, 'color': color })
              }
              this.showText.push({ text: '=============', 'color': color })
            }
          }
          if (this.records[this.stepLength - 1].status === '1') {
            this.showText.push({ text: '执行完成', 'color': color })
          }
          if (this.active !== this.stepLength && this.task.Result !== '执行失败') {
            this.timeout1 = setTimeout(function() { _this.getList() }, 4000)
          }
        })
      }
    },
    components: {
    }
  }
</script>
